<!--
 * @Author: hq
 * @Date: 2022-05-21 12:01:18
 * @LastEditors: hq
 * @LastEditTime: 2022-08-07 17:15:06
 * @Description: 头部
 * @version: 1.0
-->
<template>
  <div class="menu">
    <div
      class="list"
      :class="[active === index ? 'active' : '']"
      @click="handleClick(index)"
      v-for="(item, index) in menu"
      :key="index"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
import { getMenuData } from "@/api/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      active: null,
      menu: [],
      menu1: [
        {
          id: "1",
          title: "首页",
          meta: { sign: "welcome" },
          children: [
            {
              id: "1-1",
              route: "/welcome",
              title: "首页",
              icon: "el-icon-user",
            },
          ],
        },
        {
          id: "2",
          title: "系统",
          meta: { sign: "system" },
          children: [
            {
              id: "2-1",
              title: "系统基础",
              icon: "el-icon-user",
              children: [
                {
                  route: "/system/sys_base/sys_set", //系统设置
                  title: "系统设置",
                },
              ],
            },
            {
              id: "2-2",
              title: "管理权限",
              icon: "el-icon-user",
              children: [
                {
                  route: "/system/manage/system_role", //菜单
                  title: "角色管理",
                },
                {
                  route: "/system/manage/managers_list", //系统管理员
                  title: "管理员列表",
                },
                {
                  route: "/system/manage/rules", //系统管理员
                  title: "权限规则",
                },
              ],
            },
          ],
        },
        {
          id: "3",
          title: "配置项",
          meta: { sign: "configure" },
          children: [
            {
              id: "3-6",
              title: "公告",
              icon: "el-icon-user",
              children: [
                {
                  id: "3-6-1",
                  icon: "el-icon-user",
                  route: "/configure/notice/index", //微信
                  title: "公告列表",
                },
              ],
            },
          ],
        },
        {
          id: "5",
          title: "商城管理",
          meta: { sign: "shopSystem" },
          children: [
            {
              id: "5-6",
              title: "酒店管理",
              icon: "el-icon-user",
              children: [
                { route: "/shopSystem/hotel/hotel_list", title: "酒店列表" },
                {
                  route: "/shopSystem/hotel/order/order_list",
                  title: "酒店订单",
                },
              ],
            },

            {
              id: "5-1",
              title: "商品列表",
              icon: "el-icon-user",
              children: [
                { route: "/shopSystem/allShop/shop_list", title: "商品列表" },
                {
                  route: "/shopSystem/allShop/shop_classification",
                  title: "商品分类",
                },
                {
                  route: "/shopSystem/allShop/shop_comment",
                  title: "商品评论",
                },
              ],
            },
            {
              id: "5-2",
              title: "积分商品",
              icon: "el-icon-user",
              children: [
                { route: "/shopSystem/scoreShop/shop_list", title: "商品列表" },
              ],
            },
            // {
            //   id: "5-3",
            //   title: "自营商品",
            //   icon: "el-icon-user",
            //   children: [
            //     { route: "/shopSystem/selfShop/shop_list", title: "商品列表" },
            //   ],
            // },
            {
              id: "5-5",
              title: "订单管理",
              icon: "el-icon-user",
              children: [
                {
                  route: "/shopSystem/order/online_order",
                  title: "电商订单",
                },
                // {
                //   route: "/shopSystem/order/offline_order",
                //   title: "扫一扫订单",
                // },
                {
                  route: "/shopSystem/order/score_order",
                  title: "积分订单",
                },
              ],
            },
          ],
        },
        {
          id: "6",
          title: "营销",
          meta: { sign: "sale" },
          children: [
            {
              id: "6-6",
              title: "首页推荐",
              icon: "el-icon-user",
              children: [
                {
                  route: "/sale/indexRecommend/index_list",
                  title: "推荐列表",
                },
                {
                  route: "/sale/indexRecommend/configure_list",
                  title: "标记配置列表",
                },
              ],
            },
            {
              id: "6-7",
              title: "首页配置",
              icon: "el-icon-user",
              children: [
                {
                  route: "/sale/indexConfig/nav_config", //导航
                  title: "导航配置",
                },
                {
                  route: "/sale/indexConfig/find_goods", //发现好货
                  title: "发现好货",
                },
                {
                  route: "/sale/indexConfig/dapai", //大牌荟选
                  title: "大牌荟选",
                },
                {
                  route: "/sale/indexConfig/banner_list", //商品
                  title: "banner",
                },
                {
                  route: "/sale/indexConfig/activity", //活动
                  title: "活动",
                },
                {
                  route: "/sale/indexConfig/select", //商品
                  title: "精选新品",
                },
              ],
            },
            {
              id: "6-8",
              title: "电商推荐",
              icon: "el-icon-user",
              children: [
                {
                  route: "/sale/onlineRecommend/index_list",
                  title: "推荐列表",
                },
                {
                  route: "/sale/onlineRecommend/banner",
                  title: "banner",
                },
                {
                  route: "/sale/onlineRecommend/config_list",
                  title: "标记配置列表",
                },
              ],
            },
            {
              id: "6-9",
              title: "赠送",
              icon: "el-icon-user",
              children: [
                {
                  route: "/sale/hongbao/index",
                  title: "赠送记录",
                },
              ],
            },
          ],
        },
        {
          id: "7",
          title: "会员管理",
          meta: { sign: "member" },
          children: [
            {
              id: "7-1",
              title: "用户",
              icon: "el-icon-user",
              children: [
                {
                  id: "7-1-1",
                  title: "用户列表",
                  icon: "el-icon-user",
                  route: "/member/user_list",
                },
              ],
            },
          ],
        },
        {
          id: "8",
          title: "商户",
          meta: { sign: "merchant" },
          children: [
            {
              id: "8-1",
              title: "店铺管理",
              icon: "el-icon-user",

              children: [
                {
                  id: "8-1-1",
                  title: "店铺列表",
                  icon: "el-icon-user",
                  route: "/merchant/shopList/shop_list",
                },
              ],
            },
            {
              id: "8-2",
              title: "商家入驻",
              icon: "el-icon-user",

              children: [
                {
                  id: "8-2-1",
                  title: "入驻申请",
                  icon: "el-icon-user",
                  route: "/merchant/setting_in",
                },
                {
                  id: "8-2-2",
                  title: "待审核",
                  icon: "el-icon-user",
                  route: "/merchant/judge",
                },
              ],
            },
            // {
            //   id: "8-3",
            //   title: "物料管理",
            //   icon: "el-icon-user",
            //   children: [
            //     {
            //       id: "8-2-1",
            //       title: "物料列表",
            //       icon: "el-icon-user",
            //       route: "/merchant/material_list",
            //     },
            //   ],
            // },
          ],
        },
        // {
        //   id: "9",
        //   title: "工作台",
        //   meta: { sign: "work" },
        //   children: [
        //     {
        //       id: "9-1",
        //       title: "订单处理",
        //       icon: "el-icon-user",
        //       children: [
        //         {
        //           id: "9-1-1",
        //           title: "订单查询",
        //           icon: "el-icon-user",
        //           route: "/work/order/order_query",
        //         },
        //         {
        //           id: "9-1-2",
        //           title: "商家信息",
        //           icon: "el-icon-user",
        //           route: "/work/order/business_info",
        //         },
        //       ],
        //     },
        //     {
        //       id: "9-2",
        //       title: "积分发放",
        //       icon: "el-icon-user",
        //       children: [
        //         {
        //           id: "9-2-1",
        //           title: "发放列表",
        //           icon: "el-icon-user",
        //           route: "/work/score/score_list",
        //         },
        //       ],
        //     },
        //   ],
        // },
        {
          id: "10",
          title: "财务中心",
          meta: { sign: "money" },
          children: [
            {
              id: "10-1",
              title: "提现",
              icon: "el-icon-user",
              children: [
                {
                  id: "10-1-1",
                  title: "待审核",
                  icon: "el-icon-user",
                  route: "/money/withdrawal/wait_for_judg",
                },
                {
                  id: "10-1-2",
                  title: "审核列表",
                  icon: "el-icon-user",
                  route: "/money/withdrawal/judg_list",
                },
              ],
            },
            // {
            //   id: "10-2",
            //   title: "记录",
            //   icon: "el-icon-user",
            //   children: [
            //     {
            //       id: "10-2-2",
            //       route: "/money/dimension_string",
            //       title: "分账串",
            //       icon: "el-icon-user",
            //     },
            //     {
            //       id: "10-2-3",
            //       route: "/money/dimension_record",
            //       title: "分账记录",
            //       icon: "el-icon-user",
            //     },
            //     {
            //       id: "10-2-4",
            //       route: "/money/trad_record",
            //       title: "交易记录",
            //       icon: "el-icon-user",
            //     },
            //     {
            //       id: "10-2-5",
            //       route: "/money/scord_record",
            //       title: "积分记录",
            //       icon: "el-icon-user",
            //     },
            //     {
            //       id: "10-2-6",
            //       route: "/money/payment_record",
            //       title: "汇付关联支付",
            //       icon: "el-icon-user",
            //     },
            //     {
            //       id: "10-2-7",
            //       route: "/money/return_score",
            //       title: "待返积分",
            //       icon: "el-icon-user",
            //     },
            //     // {
            //     //   id: "9-2-8",
            //     //   route: "/money/scorereturn_record",
            //     //   title: "积分返还记录",
            //     //   icon: "el-icon-user",
            //     // },
            //   ],
            // },
          ],
        },
      ],
    };
  },
  computed: {
    ...mapState(["menuIndex"]),
  },
  methods: {
    //获取菜单接口
    async getMenuData() {
      const { data, err } = await getMenuData({});
      if (err === 0) {
        console.log(data);
        this.menu = this.menu1;
        // this.menu = data;
        sessionStorage.setItem("menu", JSON.stringify(this.menu));
        this.$bus.$emit("renderMenu");
        let curActive = Number(sessionStorage.getItem("activeIndex"));
        this.handleClick(curActive);
      }
    },
    handleClick(index) {
      this.active = index;
      this.$store.commit("saveMenu", index);
    },
  },
  watch: {
    // menuIndex: {
    //   handler() {
    //     console.log(this.menuIndex);
    //   },
    //   immediate: true,
    // },
    $route: {
      immediate: true,
      handler() {
        // component = () => import(`@/views/HomePage${optData[i].route}.vue`)
        let pathString = window.location.pathname.split("/");
        this.menu = JSON.parse(sessionStorage.getItem("menu"));
        //第一次进入this.menu为null
        if (this.menu) {
          this.menu.forEach((item, index) => {
            if (item.meta.sign === pathString[1]) {
              //根据路由存储index
              sessionStorage.setItem("activeIndex", index);
            }
          });
        }
      },
    },
  },
  created() {
    // if (!sessionStorage.getItem("activeIndex")) {
    //   this.active = 0;
    // }
    this.getMenuData();
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";
.menu {
  display: flex;
  height: 100%;
  align-items: center;
  font-size: 14px;
  .list {
    padding: 0 20px;
    box-sizing: border-box;
    -moz-user-select: none; /*mozilar*/
    -webkit-user-select: none; /*webkit*/
    -ms-user-select: none; /*IE*/
    user-select: none;
    &:hover {
      color: $color-primary1;
      cursor: pointer;
    }
  }
  .active {
    color: $color-primary1;
  }
}
</style>
